import React, { useEffect, useState } from 'react'
import { Descriptions } from 'antd';
import axios from 'axios';
import moment from 'moment'

export default function NewPreview(props) {
  const [newData, setNewData] = useState(null)
  // 获取指定id的新闻
  useEffect(() => {
    // console.log(props.match.params.id)
    axios.get(`news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
      console.log(res.data)
      setNewData(res.data)
    })
  }, [props.match.params.id])

  const auditList = ['未审核', '审核中', '已通过', '未通过']
  const publishList = ['未发布', '待发布', '已上线', '已下线']

  return (
    <div>
      {newData && <div>
        <Descriptions title={newData.title} >
          <Descriptions.Item label="创建者">{newData.author}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{moment(newData.createTime).format('YYYY/MM/DD HH:mm:ss')}</Descriptions.Item>
          <Descriptions.Item label="发布时间">{newData.publishTime ? moment(newData.publishTime).format('YYYY/MM/DD HH:mm:ss') : '暂无'}</Descriptions.Item>
          <Descriptions.Item label="区域">{newData.region}</Descriptions.Item>
          <Descriptions.Item label="审核状态"><span style={{ color: 'red' }}>{auditList[newData.auditState]}</span></Descriptions.Item>
          <Descriptions.Item label="发布状态"><span style={{ color: 'red' }}>{publishList[newData.publishState]}</span></Descriptions.Item>
          <Descriptions.Item label="访问数量">{newData.view}</Descriptions.Item>
          <Descriptions.Item label="点赞数量">{newData.star}</Descriptions.Item>
          <Descriptions.Item label="评论数量">0</Descriptions.Item>
        </Descriptions >
        <h1 style={{ marginBottom: 20 }}>新闻内容</h1>
        <div dangerouslySetInnerHTML={{
          __html: newData.content
        }}></div>
      </div>}
    </div>

  )
}
